<template>
<div class="questionlist">
	<!--搜索框-->
<div class="search-box">
	<div class="search"><input v-model="search" class="search-input" placeholder="请输入想搜索的帖子"/>
	<el-button class="search-submit" @click="handlerGetQuestionDataByTitle">搜索</el-button></div>
	<div style="display: inline-block;float:right;position: relative;top:10px;right:10%;">
		<el-button style="border: 1px solid grey;" @click="addQuestionFormVisible=true">发布问题</el-button>
	</div>
</div>
<!--分类-->
<div class="classifying-box" style="padding: 0 100px;">
	<el-button v-for="type in classifyData" class="classifying" :style="currentType==type?'background:#2CA0F0;color:white':'background:none;color:black'"
		@click="currentType=type">{{type}}</el-button>
</div>
<!--问题列表-->
<div class="question-list">
	<div v-for="(q,index) in questionData" class="question" :key="index" @click="handlerToAsk(q.id)"  :style="selCardBackground(q.solveId)">
		<!--头像 用户名-->
		<div style="position:relative;display: block;width: 100%;height:60px;border-bottom: 1px solid gainsboro">
			<el-avatar :src="q.icon" :size="50" style="float:left;position: relative;left: 5%;top: 5px;border: 2px solid limegreen;"></el-avatar>
			<span style="display: inline;position: relative;left: 6%;line-height: 60px;font-size: 20px;color:darkblue">{{q.username}}</span>
			<!--标题-->
			<span style="position: relative;
				left: 15%;line-height:60px ;
				font-size: 27px;font-weight: 500;
				max-width: 200px;color:black">{{q.title|titleEllipsis}}</span>
				<span style="position: absolute;right: 10px;line-height: 50px;color:darkgrey">浏览量:{{q.pageview}}</span>
		</div>
		<!--部分内容-->
		<div style="position: relative;width:100%;height:140px;">
			<div style="position: relative;
				left:50px;top:30px;width: 87%;
				text-indent:1cm;letter-spacing:1px;
				height: 90px;font-size: 18px;color:black">{{q.content|contentEllipsis}}</div>
		</div>
	</div>
</div>

<!--发布问题弹窗-->
	<el-dialog :visible.sync="addQuestionFormVisible" width="30%" title="发布问题" center>
		<div style="height: 390px;">
			<el-select v-model="addQuestionForm.type"
					placeholder="类型"
						>
				<el-option
							v-for="type in typeData"
							:key="type"
							:label="type"
							:value="type"
							></el-option>
		</el-select>
		<el-input type="text"
			maxlength="20"
			show-word-limit
			style="font-size: 18px;margin-top: 10px;"
			placeholder="请输入标题"
			v-model="addQuestionForm.title"
			></el-input>
		<el-input type="textarea" 
			v-model="addQuestionForm.content"
			rows="8"	
			maxlength="1500" 
			show-word-limit
			placeholder="请输入内容"
			style="font-size: 18px;margin-top: 30px;">
		</el-input>
		<div slot="footer" style="margin: 20px 0;">
			<el-button style="margin-left: 30%;" @click="handlerAddQuestion">发布</el-button>
			<el-button style="margin-left: 40px;" @click="addQuestionFormVisible=false">取消</el-button>
		</div>
		</div>
	</el-dialog>



</div>
</template>

<script>
	export default{
		name:'AskList',
		data(){
			return{
				addQuestionFormVisible:false,
				addQuestionForm:{
					type:'其它',
				},
				typeData:['高考','中考','小升初','考试考证','计算机','职业','语言','兴趣','其它'],
				classifyData:['全部','高考','中考','小升初','考试考证','计算机','职业','语言','兴趣','其它'],
				currentType:'全部',
				search:'',
				questionData:[
				],
			questionPage:{
				current:1,
				size:10,
				total:0,
				type:'',
			},	
				getQuestionDataTimer:null,
				
				like:require("@/assets/image/ask/like.png"),
				answer:require("@/assets/icons/phoenix.png"),
				unsolvedBackground:{
					background:"url("+require("@/assets/image/ask/unsolved.png")+")",
					backgroundRepeat:'no-repeat',
            		backgroundSize: 'cover'
				},
				solvedBackground:{
					background:"url("+require("@/assets/image/ask/solved.png")+")",
					backgroundRepeat:'no-repeat',
            		backgroundSize: 'cover'
				},
			}
		},
		methods:{
			handlerAddQuestion(){
				this.$axios({
					method:'POST',
					url:'question/add',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.addQuestionForm
				}).then(
					response=>{
						if (response.data.success) {
							this.addQuestionForm={}
							this.addQuestionFormVisible=false
							this.getQuestionData()
							this.$message.success('发布成功')
						}
					}
				)
			},
			handlerGetQuestionDataByTitle(){
				this.$axios({
					method:'POST',
					url:'question/getListByTitleWithFuzzy',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						title:this.search
					}
				}).then(
					response=>{
						if(response.data.success){
							this.search=''
							this.questionData=response.data.data
						}else{
							this.$message.info(response.data.message)
						}
					}
				)
			},
			//进入问题页面
			handlerToAsk(val){
				//发送请求添加浏览量
				this.$axios({
					method:'POST',
					url:'question/pageview/add',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						questionId:val
					}
				});
				
				//跳转页面
				this.$router.push({
					name:'question',
					query:{
						id:val
					}
				})
			},
			selCardBackground(val){
				if(!val){
				return this.unsolvedBackground
				}else{
					return this.solvedBackground
				}
				return this.unsolvedBackground
			},
			getQuestionData(){
				this.$axios({
					mathod:"GET",
					url:'question/getListByType',
					headers:{
						authorization:localStorage.getItem("token"),
					},
						params:{
							type:this.currentType
						}
				}).then(
					response=>{
						if(response.data.success){
							this.questionData=response.data.data
						}else{
							this.$message.error(response.data.message)
						}
					}
				)
			},
			init(){
				this.getQuestionData()
			}
		},
		filters:{
			titleEllipsis(val){
				if(!val){
					return '';
				}
					if(val.length>15){
						return val.slice(0,15)+'...'
					}
					return val
			},
			contentEllipsis(val){
				if(!val){
					return '';
				}
					if(val.length>100){
						return val.slice(0,100)+'......'
					}
					return val
			},
		},
		mounted(){
			this.init()
			/*this.getQuestionDataTimer=setInterval(()=>{
				this.getQuestionData()
			},2000);*/
		},
		watch:{
			'currentType':{
				handler(newVal,oldVal){
					if(newVal!=oldVal){
						this.getQuestionData()
					}
				}
			}
		}
	}
</script>

<style scoped>
	.questionlist{
		padding: 0 200px;
		background: #F1F1F1;
		border: 1px solid #F1F1F1;
	}
	.search-box{
		height:60px;
		position: relative;
		margin: 50px;
		margin-bottom: 50px;
	}
		.search{
		position: relative;
		left: 40%;
		top:10px;
		float: left;
		height: 40px;
		width: 380px;
		border: 1px solid darkgrey;
		background: white;
		border-radius: 10px;
	}
	.search-input{
		height: 40px;
		width: 260px;
		border-radius: 10px;
		font-size: 15px;
		padding: 0 20px;
		background:none;
		border:none;
		opacity: 0.9;
		display: inline-block;
		float: left;
		outline: none;
	}
	.search-submit{
		height: 40px;
		display: inline-block;
		background: none;
		float: right;
		border: none;
		border-left: 1px solid grey;
		border-radius: 0px;
		}
		/*分类*/
	.classifying-box{
		display:block;
		max-height:150px;
		border-bottom: 1px solid grey;
	}
	.classifying{
		margin:30px 20px;
	}
	.question-list{
		margin: 30px 300px;
		width: 900px;
		min-height: 800px;

	}
	.question{
		width: 850px;
		height: 200px;
		border: 1px solid gray;
		background: white;
		margin: 30px 0;
	}
</style>